@import "var.less";

#home{
	padding: 15px;
	.map{position: relative;overflow: hidden;box-shadow: @shadow-base;}

	#homemap{
		width: 100%;height: calc(~'100vh - 48px - 30px');
		position: relative;
	}

	.map-info{
		.map-top{
			position: absolute;top:15px;left: 50%;margin-left: -200px;
			.btns{background: #fff;display: inline-block;vertical-align: top;}
			.search{width: 420px;display: inline-block;vertical-align: top;margin-left: 20px;}
			.fa{margin-right:5px;}
			.ivu-select-item{white-space: normal;}
		}

		.map-right{
			width: 240px;height: calc(~'100vh - 48px - 30px - 300px');
			background:#fff;box-shadow: @shadow-right;transition:all @transition-time;
			position: absolute;right:-250px;top:15px;bottom: 50px;
			padding: 20px;overflow: auto;
			.tree-driver{
				display: inline-block;padding: 0 5px 0 15px;cursor: pointer;position: relative;
				margin-left:-10px;
				&:hover,&.action{
					background-color: #ccf3f7;
				}
				&.online{
					&:before{
						content: "";display: block;
						width: 8px;height: 8px;border-radius: 8px;background: @primary-color;
						position: absolute;top:5px;left:2px;
					}
				}
			}
		}

		.map-bottom{
			width: 100%;background: #fff;z-index:160;box-shadow: @shadow-up;transition:all @transition-time;
			position: absolute;bottom: -220px;
			.ivu-tabs-tabpane{position: relative;}


			.ivu-tabs-bar{margin-bottom: 0;padding-left: 60px;}
			.left-btn{
				position: absolute;top:0;left: 0;z-index: 10;
				height: 36px;
			}
			.bottom-btn{
				position: absolute;top:0;right: 0;z-index: 10;
				height: 36px;width: 50px;
			}
			.carinfo{
				height: 220px;overflow: auto;position: relative;
				.table{
					border:0;
					th{border-bottom: 1px solid @border-color-base;}
					td{border-right:0;border-bottom: 1px solid @border-color-base;}
				}
			}
		}
		&.active-left{
			.map-right{right: 10px;}
		}

		&.active-bottom{
			.map-bottom{bottom: 0;}
			.bottom-btn .ivu-icon-chevron-up{transform:rotate(180deg);}
		}
	}

}
